<template>
    <div class="video-content">
        <div class="title">
            <h3>摄像头视频监控<span>Video surveillance</span></h3>
        </div>
        <div class="video-list">
            <div class="video-block">
                <div class="video-item" v-for="(item, index) in dataVideo" :key="index" @click="handle(item)">
                    <p>
                        <font-awesome-icon class="icon-video" :icon="['fas', 'video']" />&nbsp;设备：{{
                            item.videoText
                        }}
                    </p>
                    <video :src="item.videoSrc" muted loop autoplay></video>
                    <div class="video-footer"></div>
                </div>
            </div>
        </div>
        <div class="video-big" v-show="isVideo">
            <div class="cover">
                <video :src="this.videoBig" id="video" muted loop autoplay></video>
                <div class="close" @click="close">
                    <font-awesome-icon class="icon-times" :icon="['fas', 'times']" />
                </div>
                <div class="videoTime">
                    <div class="spot"></div>
                    <span>{{ this.date1 }}</span>
                    <span>{{ this.datatime }}</span>
                </div>
                <div class="videoText">
                    <p>{{ this.videotext }}</p>
                </div>
                <div class="video-big-footer"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Video',
    data() {
        return {
            isVideo: false,
            videoBig: '',
            date1: '',
            datatime: '',
            videotext: '',
            dataVideo: [
                {
                    videoSrc: '/haiyuan/static/video/location.mp4',
                    videoText: '外景',
                },
                {
                    videoSrc: '/haiyuan/static/video/VID20210129101414_cps.mp4',
                    videoText: '会议室',
                },
                {
                    videoSrc: '/haiyuan/static/video/zm.mp4',
                    videoText: '南门',
                },
                // {
                //     videoSrc: '/static/video/zm.mp4',
                //     videoText: '南门',
                // },
                // {
                //     videoSrc: '/static/video/zm.mp4',
                //     videoText: '南门',
                // },
                // {
                //     videoSrc: '/static/video/zm.mp4',
                //     videoText: '南门',
                // },
                // {
                //     videoSrc: '/static/video/zm.mp4',
                //     videoText: '南门',
                // },
                // {
                //     videoSrc: '/static/video/zm.mp4',
                //     videoText: '南门',
                // },
                // {
                //     videoSrc: '/static/video/zm.mp4',
                //     videoText: '南门',
                // },
                // {
                //     videoSrc: '/static/video/zm.mp4',
                //     videoText: '南门',
                // },
                // {
                //     videoSrc: '/static/video/zm.mp4',
                //     videoText: '南门',
                // },
                // {
                //     videoSrc: '/static/video/zm.mp4',
                //     videoText: '南门',
                // },
                // {
                //     videoSrc: '/static/video/zm.mp4',
                //     videoText: '南门',
                // },
                // {
                //     videoSrc: '/static/video/zm.mp4',
                //     videoText: '南门',
                // },
                // {
                //     videoSrc: '/static/video/zm.mp4',
                //     videoText: '南门',
                // },
            ],
        }
    },
    methods: {
        handle(item) {
            //点击监控出现弹出框
            this.dataVideo.some((i) => {
                //遍历监控视频
                this.videoBig = item.videoSrc //弹出框视频等于当前点击的视频
                this.videotext = item.videoText
            })
            this.isVideo = true //弹出框状态为显示
        },
        close() {
            this.isVideo = false //隐藏视频弹出框
            let myVideo = document.getElementById('video')
            // myVideo.pause() //关闭视频
        },
        //时间
        date() {
            var dt = new Date() // date = 1567760101781; 毫秒数
            var y = dt.getFullYear().toString()
            var m = (dt.getMonth() + 1).toString().padStart(2, '0')
            var d = dt.getDate().toString().padStart(2, '0')
            var hh = dt.getHours().toString().padStart(2, '0')
            var mm = dt.getMinutes().toString().padStart(2, '0')
            var ss = dt.getSeconds().toString().padStart(2, '0')
            this.date1 = y + '-' + m + '-' + d
            this.datatime = hh + ':' + mm + ':' + ss
        },
        currentTime() {
            setInterval(this.date, 1000)
        },
    },
    mounted() {
        this.index = 2
        this.date()
        this.currentTime()
    },
}
</script>

<style lang="less" scoped>
@import '../../../assets/less/school.less';
.video-content {
    width: 350px;
    padding-right: 15px;
    margin-top: 10px;
    .video-list {
        margin-top: 20px;
        height: 780px;
        overflow-y: scroll;
        scrollbar-width: none;
        // border: 1px solid red;
        .video-block {
            // border: 1px solid red;
            display: flex;
            flex-wrap: wrap;
            padding: 5px;
            justify-content: space-between;
            .video-item {
                float: left;
                width: 48%;
                background: rgb(61, 83, 118);
                margin-bottom: 4%;
                position: relative;
                &:hover {
                    box-shadow: 0 0 10px rgb(154, 186, 238);
                }
                &::after {
                    content: '';
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    top: -1px;
                    left: -1px;
                    border-top: 3px solid rgb(125, 168, 238);
                    border-left: 3px solid rgb(125, 168, 238);
                }
                &::before {
                    content: '';
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    top: -1px;
                    right: -1px;
                    border-top: 3px solid rgb(125, 168, 238);
                    border-right: 3px solid rgb(125, 168, 238);
                }
                .video-footer {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    &::after {
                        content: '';
                        width: 20px;
                        height: 20px;
                        position: absolute;
                        bottom: -1px;
                        left: -1px;
                        border-bottom: 3px solid rgb(125, 168, 238);
                        border-left: 3px solid rgb(125, 168, 238);
                    }
                    &::before {
                        content: '';
                        width: 20px;
                        height: 20px;
                        position: absolute;
                        bottom: -1px;
                        right: -1px;
                        border-bottom: 3px solid rgb(125, 168, 238);
                        border-right: 3px solid rgb(125, 168, 238);
                    }
                }
                video {
                    display: block;
                    width: 100%;
                    cursor: pointer;
                    margin-right: 2%;
                    padding: 5px;
                }
                p {
                    padding: 10px 5px 0px 5px;
                    margin-left: 5px;
                    // text-align: center;
                    color: #fff;
                    font-size: 12px;
                }
            }
        }
    }
    .video-list::-webkit-scrollbar {
        display: none;
    }
    .video-big {
        width: 600px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .cover {
            // padding: 10px 10px 10px 10px;
            background: rgb(61, 83, 118);
            // border-radius: 6px;
            padding: 10px;
            &::after {
                content: '';
                width: 40px;
                height: 40px;
                position: absolute;
                top: -1px;
                left: -1px;
                border-top: 5px solid rgb(125, 168, 238);
                border-left: 5px solid rgb(125, 168, 238);
            }
            &::before {
                content: '';
                width: 40px;
                height: 40px;
                position: absolute;
                top: -1px;
                right: -1px;
                border-top: 5px solid rgb(125, 168, 238);
                border-right: 5px solid rgb(125, 168, 238);
            }
            .video-big-footer {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                &::after {
                    content: '';
                    width: 40px;
                    height: 40px;
                    position: absolute;
                    bottom: -1px;
                    left: -1px;
                    border-bottom: 5px solid rgb(125, 168, 238);
                    border-left: 5px solid rgb(125, 168, 238);
                }
                &::before {
                    content: '';
                    width: 40px;
                    height: 40px;
                    position: absolute;
                    bottom: -1px;
                    right: -1px;
                    border-bottom: 5px solid rgb(125, 168, 238);
                    border-right: 5px solid rgb(125, 168, 238);
                }
            }
            video {
                display: block;
                width: 100%;
            }
            .close {
                position: absolute;
                top: 15px;
                right: 15px;
                width: 30px;
                height: 30px;
                line-height: 30px;
                border-radius: 50%;
                font-size: 16px;
                color: #f1f1f1;
                text-align: center;
                cursor: pointer;
                background-image: linear-gradient(to bottom, rgb(146, 178, 202), rgb(151, 150, 182));
            }

            .videoTime {
                position: absolute;
                top: 10px;
                left: 15px;
                display: flex;
                align-items: center;
                .spot {
                    width: 10px;
                    height: 10px;
                    background: red;
                    margin-right: 10px;
                    border-radius: 50%;
                    animation: spotan 1s linear infinite;
                }
                span {
                    color: #fff;
                    font-size: 16px;
                    font-weight: 600;
                    margin-right: 10px;
                    &:nth-child(3) {
                        color: #000;
                    }
                }
            }
            .videoText {
                position: absolute;
                bottom: 15px;
                right: 15px;
                font-size: 16px;
                color: #fff;
                font-weight: 600;
            }
        }
    }
}
@keyframes spotan {
    from {
        background: transparent;
    }
    to {
        background: red;
    }
}
</style>